<template>
  <div class="login-content">
    <div class="userTitle">用户登录</div>
    <van-field v-model="username" required placeholder="请输入用户名" class="loginInput" />
    <van-field v-model="password" required placeholder="请输入密码" type="password" class="loginInput" />
    <van-button type="primary" @click="login" class="loginButton">登录</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      this.$http
        .post(
          'http://21.50.131.33:8080/jsc/login',
          { username: this.username, passwd: this.password },
          {
            headers: {
              'Access-Control-Allow-Origin': '*',
              'Content-Type': 'application/json'
            }
          }
        )
        .then(res => {
          if (res.status === 200 && res.data.code === 0) {
            window.localStorage.setItem('userInfo', JSON.stringify(res.data))
            this.$emit('notLogin', false)
          } else {
            this.$toast.fail('用户名或密码错误')
          }
        })
        .catch(err => console.log(err))
    }
  }
}
</script>

<style lang="scss" scoped>
.login-content {
  text-align: center;
  background-color: #0a0d3c;
  padding: 30px;
  width: 300px;
  margin: 150px auto;
  border-radius: 10px;
  .userTitle {
    font-size: 20px;
    margin-bottom: 20px;
    color: #5b8ff9;
  }
  .loginInput {
    width: 300px;
    display: inline-block;
    margin-bottom: 10px;
    border-radius: 4px;
  }
  .loginButton {
    width: 300px;
    height: 40px;
    border-radius: 4px;
  }
}
</style>
